<template>
  <div class="index-footer">
    <div class="footer-logo">
      <img :src="`${env.publicPath}images/logo-0.png`" alt="">
    </div>

    <div class="footer-list">
      <ul>
        <li>
          <span>首页</span>
          <a href="#">首页</a>
        </li>
        <li>
          <span>素材模版</span>
          <a href="#">H5 主题模版</a>
          <a href="#">Card 模版</a>
        </li>
        <li>
          <span>成功案例</span>
          <a href="#">成功案例</a>
        </li>
        <li>
          <span>帮助中心</span>
          <a href="#">帮助支持</a>
          <a href="#">教程</a>
          <a href="#">Q&A</a>
        </li>
        <li>
          <span>其他</span>
          <a href="#">关于我们</a>
          <a href="#">联系我们</a>
          <a href="#">官方微信</a>
          <a href="#">官方微博</a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {}
</script>
<style lang="scss">
  .index-footer{
    position: relative;
    display: flex;
    width: 100%;
    min-height: 295px;
    padding-top: 70px;
    background: #1B222B;
    overflow: auto;

    .footer-logo{
      width: 25%;
      min-width: 132px;
      display: flex;
      justify-content: flex-end;

      img{
        display: block;
        width: 132px;
        height: 30px;
      }
    }

    .footer-list{
      width: 78%;
      padding-top: 6px;
      padding-left: 132px;

      ul,li{
        list-style: none;
      }
      ul{
        width: 100%;
        display: flex;
        justify-content: flex-start;
      }
      li{
        display: block;
        margin-right: 80px;

        span{
          display: block;
          font-size: 14px;
          color: #fff;
          line-height: 1;
          margin-bottom: 26px;
          white-space: nowrap;
        }

        a{
          display: block;
          font-size: 14px;
          color: #fff;
          line-height: 1;
          margin-bottom: 12px;
          white-space: nowrap;
        }
      }
    }
  }
</style>
